import React, { Component } from 'react';
import styles from  './mapOl.css'
//import {formatNowTime} from '../../../../utils/utils'

 
// import {globalQuery,globalPostQuery} from '../../../services/global';
// import {getPerm_url} from '../../../services/ip';

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';

import XYZ from 'ol/source/XYZ';

import { transform } from 'ol/proj';

class MapOl extends Component {
    constructor(props) {
        super(props);
        this.state={
          
        }
        this.map=null;
    }  


    //初始化底图
    initMap = ()=>{
        this.map  = new Map({
			target: "map",
			view: new View({
                center: transform([115.942426,38.941734], "EPSG:4326", "EPSG:3857"), // 地图初始中心点,
              //  projection: "EPSG:3857",  
				zoom:12,
				minZoom: 5,
                maxZoom:  13
			})
        });   
        let dtLayer =new TileLayer({ 
            title:"底图",  
            source:new XYZ({
                url:"http://t7.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b3bd3e87fb62be3c15e5046b5c7012f6" 
            }),
            opacity: 0.5   
       });  
       this.map.addLayer(dtLayer);
    };

    componentDidMount(){
        this.initMap()
    }
    render() { 
        return ( 
            <div id="map" className={styles.mapBox}></div> 
        );
    } 
}

export default MapOl;